<template>
	<view class="wrap">
		<view class="statusBox">
			<view class="status" v-if="getStatus(info.Status)">
				{{ getStatus(info.Status) || '' }}
			</view>
			<view class="cancel_btn" v-if="info.Status == 0 || info.Status == 1" @click="cancelFun()">
				取消订单
			</view>
		</view>
		<view class="address" v-if="info.Delivery_Accepter">
			<view class="address_flex">
				<view class="address_cell">
					<view class="icon">
						<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1722938992622985.png"
							mode="aspectFill"></image>
					</view>
					<view class="name">
						{{ info.Delivery_Accepter + ' ' || '--' + ' ' }}{{ info.Delivery_Phone || '--' }}
					</view>
				</view>
				<!-- <view class="add_btn" @click="addCustomFun()">
					添加到客户薄
				</view> -->
			</view>

			<view class="address_cell" v-if="info.Delivery_Address">
				<view class="icon"></view>
				<view class="lit">
					<text v-if="info.Delivery_Province">{{ info.Delivery_Province }}</text>
					<text v-if="info.Delivery_City">{{ info.Delivery_City }}</text>
					<text v-if="info.Delivery_Address">{{ info.Delivery_Address }}</text>
				</view>
			</view>
		</view>
		<view class="shop">
			<view class="tit">
				商品信息
			</view>
			<block v-for="(item, index) in info.Item" :key="index">
				<view class="shop_cell">
					<view class="icon">
						<image :src="imgeone(item.ProductImg)" mode="aspectFill"></image>
					</view>
					<view class="shop_info">
						<view class="shop_tit">
							{{ item.ProductName || '--' }}
						</view>
						<view class="shop_foot">
							<view class="shop_data">
								<view class="lit">
									{{ item.Style || '--' }}
								</view>
								<view class="lit" v-if="item.Qty">
									x{{ item.Qty }}
								</view>
							</view>
							<view class="shop_price" v-if="info.OrderType != '赠送订单'">
								<text>¥</text>{{ item.Promotion || item.Price }}
							</view>
						</view>
					</view>
				</view>
				<view class="evaluateBox">
					<view class="evalBtn" v-if="info.Status == 4 && item.IsEval != 1"
						@click="nav_to(`/pages/shop/user_evaluate?productID=${item.ProductID}&orderID=${item.OrderID}&OrderItemID=${item.ID}`)">
						商品评价
					</view>
					<view class="evalBtn" style="margin-left:20rpx" v-if="item.AfterStatus == 0"
						@click="clickSales(item)">
						申请售后
					</view>
					<view class="evalBtn" style="margin-left:20rpx" v-if="item.AfterStatus == 1">
						售后审核中
					</view>
					<view class="evalBtn" style="margin-left:20rpx" v-if="item.AfterStatus == 2">
						已同意售后申请
					</view>
					<view class="evalBtn" style="margin-left:20rpx" v-if="item.AfterStatus == -1">
						已拒绝售后申请
					</view>
				</view>
				<view class="evaluateBox" v-if="item.AfterSaleData">
					<view class="retText">售后回复：{{item.AfterSaleData}}</view>
				</view>
			</block>
			<view class="shop_total" v-if="info.OrderType != '赠送订单'">
				总金额：<text class="unit">¥</text><text class="total">{{ info.Price }}</text>
			</view>
			<view class="shop_Dis" v-if="info.Discounts != 0 && info.OrderType != '赠送订单'">
				已优惠：<text class="unit">¥</text><text class="total">{{ info.Discounts }}</text>
			</view>
			<view class="shop_total" v-if="info.OrderType != '赠送订单' && info.Status != 0">
				实付：<text class="unit">¥</text><text class="total">{{ info.PayMoney }}</text>
			</view>
		</view>

		<view class="person">
			<view class="person_cell" v-if="info.OrderType == '赠送订单' && info.SenderName">
				<view class="tit">
					赠送人
				</view>
				<view class="lit">
					{{ info.SenderName }}
				</view>
			</view>
			<view class="person_cell">
				<view class="tit">
					订单编号
				</view>
				<view class="lit">
					{{ info.OrderNo }}
				</view>
			</view>
			<view class="person_cell" v-if="istrack" @click="$util.copyText(track.waybill_id)">
				<view class="tit">
					物流单号
				</view>
				<view class="lit" style="color: #3478f6;">
					{{ track.waybill_id || '--' }}
				</view>
			</view>
			<view class="person_cell">
				<view class="tit">
					{{ info.OrderType == '赠送订单' ? '赠送' : '创建' }}时间
				</view>
				<view class="lit">
					{{ $util.formatDateTime(info.OrderTime) }}
				</view>
			</view>
			<view class="person_cell">
				<view class="tit">
					下单时间
				</view>
				<view class="lit">
					{{ $util.formatDateTime(info.PayTime) }}
				</view>
			</view>
		</view>

		<view class="logistics" v-if="istrack">
			<view class="tit">
				物流信息
			</view>
			<view class="logistics_cell" v-if="track.path.path_action.length">
				<view class="content_cell" v-for="(item, index) in track.path.path_action" :key="index">
					<view class="titbox">
						<view class="icon"></view>
						<view class="time">
							{{ $util.formatDateTime(item.action_time, true) }}
						</view>
					</view>
					<view class="titcell">
						<view class="icon">
							<!-- <view class="line" v-show="index!=(track.path.path_action.length-1)"></view> -->
						</view>
						<view class="name">
							{{ item.action_msg }}

						</view>
					</view>
				</view>
			</view>
			<view class="nullbox" v-else>
				暂无物流信息
			</view>
		</view>

		<view style="height: 180rpx;"></view>
		<view class="payBox" v-if="info.Status == 0" @click="payFun">
			<view class="btn payBtn">
				立即付款
			</view>
		</view>
		<view class="payBox" v-if="info.Status == 3" @click="confirmOrder">
			<view class="btn payBtn">
				确认收货
			</view>
		</view>
		<uni-popup type="center" ref="salesRef">
			<view class="cirPop">
				<view class="group_textarea">
					<view class="dectitle">申请售后</view>
					<textarea style="width: 100%;height: 54%; font-weight: 400;" v-model="salesText"
						placeholder="请填写申请理由" placeholder-class="remtext" maxlength="100" />
				</view>
				<view class="subBtn" @click="refuseSales()">确定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			ID: '',
			info: {},
			track: false,
			salesText: '',
			nowShopInfo: {},
		};
	},
	onLoad(e) {
		this.ID = e.id
	},
	onShow() {
		this.init()

	},
	computed: {
		total() {
			if (!this.info || !this.info.Item) return
			let con = 0
			this.info.Item.forEach(item => {
				if (item.Promotion) {
					con += item.Qty * item.Promotion
				} else {
					con += item.Qty * item.Price
				}
			})
			return con
		},
		istrack() {
			if (this.track && this.track.path && this.track.path.path_action && Array.isArray(this.track.path.path_action)) {
				return true
			}
			return false
		}
	},
	methods: {
		async init() {
			this.Detail()
			this.Track()
		},
		cancelFun() {
			this.$pv.showModel('是否确认取消订单？', this.Cancel)
		},
		async Cancel() {
			let res = await this.$api.post('/Order/Cancel', {
				ID: this.info.ID
			})
			if (res.code == 0) {
				this.$pv.msg('取消成功')
				this.init()
				uni.$emit('updateOrder')
			} else {
				this.$pv.msg(res.message)
			}
		},
		addCustomFun() {
			this.$pv.showModel('是否要将该客户添加至客户薄？', this.CreateByOrder)
		},
		async CreateByOrder() {
			let res = await this.$api.post('/Customer/CreateByOrder', {
				ID: this.info.ID
			})
			if (res.code == 0) {
				this.$pv.msg('添加成功')
			} else {
				this.$pv.msg(res.message)
			}
		},
		imgeone(img) {
			return img.split(',')[0];
		},
		getStatus(s) {
			return s == -2 ? '已退款' : s == -1 ? '已取消' : s == 0 ? '待付款' : s == 1 ? '待发货' : s == 2 ? '待填地址' : s == 3 ? '待签收' : s == 4 ? '已完成' : ''
		},
		async Detail() {
			let res = await this.$api.post('/Order/Detail', { ID: this.ID })
			this.info = res.data || false
		},
		async Track() {
			let res = await this.$api.post('/Order/Track', { ID: this.ID })
			if (res.code == 0) {
				if (res.data.errmsg == 'ok') {
					this.track = res.data.waybill_info
				}
			}
		},
		async payFun() {
			let _this = this
			// 支付订单接口
			let response = await this.$api.post('/Payment/PayV2', {
				EventType: this.info.OrderType,
				EventID: this.info.ID,
				body: this.info.OrderType,
				total_fee: this.total,
				SourcePage: 'pages/order/orderDetail',
				PayChannel: 'weixin',
			});

			if (response.code == 0) {
				let payObj = JSON.parse(response.data);
				// console.log(payObj, '==================PayV2----res.data')

				uni.requestPayment({
					provider: 'wxpay',
					// #ifdef MP-WEIXIN
					timeStamp: payObj.timeStamp,
					nonceStr: payObj.nonceStr,
					package: payObj.package,
					signType: payObj.signType,
					paySign: payObj.paySign,
					// #endif
					success: async function (res) {
						_this.$pv.msg('支付成功');
						_this.init()
						uni.$emit('updateOrder')
					},
					fail: function (err) {
						_this.$pv.msg('您已取消支付');
					},
				});
			} else if (response.code == 999) {
				_this.$pv.msg('支付成功');
				_this.init()
				uni.$emit('updateOrder')
			}
		},
		confirmOrder() {
			const that = this
			uni.showModal({
				title: '提示',
				content: '确定要确认收货吗？',
				success: async function (res) {
					if (res.confirm) {
						const res = await that.$api.post('/Order/CheckOrder', {
							ID: that.info.ID
						});
						const { code, data, msg } = res
						if (code == 0) {
							that.$pv.msg('确认收货成功')
							that.init()
							uni.$emit('updateOrder')
						} else {
							that.$pv.msg(msg)
						}
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		clickSales(e) {
			this.nowShopInfo = e
			this.$refs.salesRef.open()
		},
		async refuseSales() {
			const that = this
			const res = await that.$api.post('/Order/ApplyAfter', {
				...that.nowShopInfo,
				Remark: that.salesText,
				AfterType: '退款/退货',
				OrderItemID: that.nowShopInfo.ID
			});
			if (res.code == 0) {
				that.$pv.msg('申请成功')
				that.init()
				that.$refs.salesRef.close()
			} else {
				that.$pv.msg(res.message)

			}
		}
	}
}
</script>

<style lang="scss">
page {
	background: #f6f6f6;
}

image {
	width: 100%;
	height: 100%;
}

.wrap {
	padding: 24rpx;

	.statusBox {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.status {
			font-weight: bold;
			font-size: 42rpx;
			color: #333333;
			margin: 8rpx 0 32rpx 0;
		}

		.cancel_btn {
			height: 58rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 14rpx 26rpx;
			border-radius: 44rpx;
			font-size: 26rpx;
			color: #5d8bf8;
			background-color: #fff;
			border: 2rpx solid #5d8bf8;
		}
	}

	.address {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 24rpx;
		background-color: #FFFFFF;

		.address_flex {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.add_btn {
				font-size: 26rpx;
				color: #3478f6;
				text-decoration: underline;
			}
		}

		.address_cell {
			display: flex;
			align-items: center;

			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.name {
				font-weight: bold;
				font-size: 32rpx;
				max-width: 440rpx;
			}

			.lit {
				width: 92%;
				margin-top: 16rpx;
				font-size: 24rpx;
				color: #666666;

				text {
					font-size: 24rpx;
					color: #666666;
				}
			}
		}
	}

	.shop {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 24rpx;
		margin: 16rpx 0;

		.tit {
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
		}

		.shop_cell {
			margin: 24rpx 0;
			display: flex;
			align-items: center;

			.icon {
				width: 176rpx;
				height: 176rpx;
				overflow: hidden;
				border-radius: 16rpx;
				margin-right: 24rpx;
			}

			.shop_info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				min-height: 176rpx;

				.shop_tit {
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}

				.shop_foot {
					.shop_data {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.lit {
							font-size: 28rpx;
							color: #999999;
						}

						.lit:first-child {
							margin-top: 10rpx;
							width: 85%;
						}
					}

					.shop_price {
						font-weight: bold;
						font-size: 36rpx;
						color: #fc394b;

						text {
							font-weight: bold;
							font-size: 20rpx;
							color: #fc394b;
						}

					}
				}
			}
		}

		.shop_total {
			text-align: right;
			font-size: 28rpx;
			color: #333333;

			.unit {
				font-weight: bold;
				font-size: 20rpx;
				color: #fc394b;
			}

			.total {
				font-weight: bold;
				font-size: 36rpx;
				color: #fc394b;
			}
		}

		.shop_Dis {
			text-align: right;
			font-size: 24rpx;
			color: #5d5a5a;

			.unit {
				// font-weight: bold;
				font-size: 20rpx;
				color: #5d5a5a;
			}

			.total {
				// font-weight: bold;
				font-size: 30rpx;
				color: #5d5a5a;
			}
		}


		.evaluateBox {
			width: 100%;
			margin: 20rpx 0;
			display: flex;
			align-items: center;

			.evalBtn {
				margin-left: auto;
				color: #5d8bf8;
				border: 2rpx solid #5d8bf8;
				padding: 10rpx 16rpx;
				border-radius: 12rpx;
				font-size: 24rpx;
			}

			.retText {
				font-size: 24rpx;
				color: #666666;
			}
		}
	}

	.person {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 24rpx;

		.person_cell {
			display: flex;
			align-items: center;
			margin-bottom: 14rpx;

			view {
				font-size: 28rpx;
			}

			.tit {
				width: 25%;
				color: #666666;
			}

			.lit {
				width: 75%;
				color: #333333;
			}
		}

		.person_cell:last-child {
			margin-bottom: 0rpx;
		}
	}

	.logistics {
		margin-top: 20rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 24rpx;

		.tit {
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			margin-bottom: 24rpx;
		}

		.logistics_cell {
			.content_cell {
				.titbox {
					display: flex;
					align-items: center;

					.icon {
						width: 22rpx;
						height: 22rpx;
						border-radius: 50%;
						background-color: #b8bdc5;
						margin-right: 10rpx;
					}

					.name {
						font-size: 28rpx;
						flex: 1;
						word-break: break-all;
					}

					.time {
						padding: 10rpx 0;
						font-size: 26rpx;
						color: #b8bdc5;
					}
				}

				.titcell {
					display: flex;
					align-items: center;
					height: max-content;
					position: relative;

					&::after {
						position: absolute;
						content: '';
						height: 100%;
						width: 2rpx;
						left: 10rpx;
						top: 0;
						background-color: #b8bdc5;
					}

					.icon {
						width: 22rpx;
						margin-right: 10rpx;
					}

					.time {
						padding: 10rpx 0;
						font-size: 26rpx;
						color: #b8bdc5;
					}

					.name {
						padding: 10rpx 0;
						font-size: 28rpx;
						flex: 1;
						color: #111;
						word-break: break-all;
					}
				}
			}

			.content_cell:first-child {
				.titbox {
					.icon {
						background-color: #3478f6;
					}
				}

				.titcell {
					&::after {
						background-color: #3478f6;
					}
				}
			}

			.content_cell:last-child {
				.titcell {
					&::after {
						height: 0;
					}
				}
			}
		}

		.nullbox {
			height: 90rpx;
			font-size: 28rpx;
			color: #b8bdc5;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.payBox {
		position: fixed;
		width: 100%;
		box-sizing: border-box;
		left: 0;
		bottom: 0;
		padding: 20rpx 30rpx 50rpx 30rpx;
		background-color: #fefefe;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: space-between;

		.btn {
			background: linear-gradient(98deg, #a6c8ff 0%, #5d8bf8 100%);
		}
	}
}

.cirPop {
	width: 644rpx;
	max-height: 1030rpx;
	background-color: #FFFFFF;
	overflow: auto;
	border-radius: 54rpx;
	padding: 40rpx;

	.group_textarea {
		height: 264rpx;
		margin-top: 30rpx;
		// background-color: #fff;
		// padding-left: 32rpx;
		// text-indent: 2em;
		box-sizing: border-box;
		position: relative;

		.remtext {
			font-size: 28rpx !important;
			color: #C2C2C2 !important;
			font-weight: 400 !important;
		}

		.dectitle {
			margin-bottom: 25rpx;
		}

		.count {
			position: absolute;
			bottom: 15rpx;
			right: 15rpx;
			font-size: 24rpx;
			color: #C2C2C2;
		}

		/deep/ .u-textarea {
			background: none !important;
			padding-left: 0 !important;
			padding-right: 0 !important;
			border-bottom: none !important;
			padding: 0 !important;
			height: 100% !important;
			text-indent: 2em;
		}

		/deep/ .u-textarea__count {
			background: none !important;
			color: #0d0d0d !important;
		}

		/deep/ .u-textarea__field {
			color: #0d0d0d !important;
			font-size: 28rpx !important;
			height: 100% !important;
		}
	}

	.subBtn {
		margin: 20rpx auto;
		font-size: 20rpx;
		color: #fff;
		padding: 20rpx 48rpx;
		border-radius: 50rpx;
		min-width: 100rpx;
		background: linear-gradient(98deg, #a6c8ff 0%, #5d8bf8 100%);
		// border: 2rpx solid #706EEE;
		text-align: center;

	}
}
</style>
